<template>
<div >
    <x-header>设置</x-header>
    <div class="S_txbox">
        
        <el-upload
        class="upload"
        action="http://localhost:3000/api/upload"
        :on-success="handleAvatarSuccess"
        :show-file-list=false>
        <img class="S_tx" :src="User_tx" alt="" width="100">
        <p class="S_tips">点击修改头像</p>
        </el-upload>
    </div>

    <div class="S_b"></div>
    <div class="S_msg">
        <div class="S_tbox" @click="S_name()">
           <p class="S_t">昵称</p> 
           <p class="S_m">{{User_name}}</p>
        </div>
        <div class="S_tbox" @click="showsex= true">
            <p class="S_t">性别</p>
            <img :src='User_seximg' alt="" width="20">&nbsp;&nbsp;
            <p class="S_m">{{User_sex}}</p>
        </div>
        <div class="S_tbox" @click="S_intro()">
            <p class="S_t">个人标签</p>
            <p class="S_m">{{User_intro}}</p>
        </div>
    </div>
    
    <div class="S_btbox">
        <button class="S_bt1" @click="showpsw= true">修改密码</button>
        <button class="S_bt1" @click="tc()">退出账号</button>
    </div>

    


    <div v-transfer-dom>
    <x-dialog v-model="showsex" hide-on-blur >
    <div>
    <group :title="('请选择性别')">
      <radio :options="radio" value="男" v-model="User_sex"></radio>
    </group>
    <button class="Sex_bt" @click="showsex = false">取消</button>
    <button class="Sex_bt" @click="S_sex(),showsex = false">确定</button>
    </div>
    </x-dialog>
    </div>

    <div v-transfer-dom>
    <x-dialog v-model="showpsw" hide-on-blur >
    <div>
        <group>
        <x-input title="输入原密码" type="password" placeholder="输入原密码" v-model="psw" :min="6" :max="12">
        <img slot="label" style="padding-right:10px;display:block;" src="static/img/psw.png" width="24" height="24">
        </x-input>
        </group>
        <group>
        <x-input title="修改密码" type="password" placeholder="输入修改密码" v-model="spsw" :min="6" :max="12">
        <img slot="label" style="padding-right:10px;display:block;" src="static/img/psw.png" width="24" height="24">
        </x-input>
        <x-input title="确认密码" type="password" placeholder="确认修改密码" v-model="spsw2" :equal-with="spsw">
        <img slot="label" style="padding-right:10px;display:block;" src="static/img/psw2.png" width="24" height="24">
        </x-input>
        </group>

        <button class="Sex_bt" @click="showpsw = false">取消</button>
        <button class="Sex_bt" @click="S_psw()">确定</button>
    </div>
    </x-dialog>
    </div>

</div>
</template>
<script>
import {TransferDomDirective as TransferDom } from 'vux'
import { AlertModule} from 'vux'
export default {
  inject:['reload'],
  inject:['iflogin'],
  directives: {
    TransferDom
  },
  data () {
    return {
        psw:'',
        spsw:'',
        spsw2:'',
        showsex: false,
        showpsw: false,
        radio: [ '男', '女' ],
        User_seximg:'',
        User_name:this.$store.state.wd.wdname,
        User_tx:this.$store.state.wd.wdtx,
        User_sex:this.$store.state.wd.wdsex,
        User_intro:this.$store.state.wd.wdintro,
    }
  },
  methods: {
      tc(){
            sessionStorage.removeItem('User_id');
            this.$store.state.wd.wdid=null;
            this.$store.state.wd.wdname=null;
            this.$store.state.wd.wdtx='static/img/unlogin.png';
            this.$store.state.wd.wdsex='无';
            this.$store.state.wd.wdlike=null;
            this.$store.state.wd.wdintro='未登录';
            this.$store.state.wd.wdtz=null;
            this.$store.state.wd.wdpl=null;
            this.$store.state.wd.wddz=null;
            this.$store.state.wd.wdlook=null;
            this.$router.push('/Login');
      },
      S_psw(){//修改密码
        this.$vux.loading.show();
        this.$http.post("http://localhost:3000/users/S_psw",
            {
            User_id:this.$store.state.wd.wdid,
            psw:this.psw,
            psw2:this.spsw,
            },{emulateJSON: true})
            .then(
            (response)=>{
                this.$vux.loading.hide();
                let a = response.data.msg.user;
                if(a.n==0){
                    this.$vux.toast.show({
                    type: 'text',
                    text: '原密码错误!',
                    position: 'middle',
                    time: '1000',
                    })
                }
                else if(a.n==1 && a.nModified==0){
                    this.$vux.toast.show({
                    type: 'text',
                    text: '修改密码与原密码相同!',
                    position: 'middle',
                    time: '1000',
                    })
                }
                else if(a.n==1 && a.nModified==1){
                    this.$vux.toast.show({
                    type: 'text',
                    text: '密码修改成功！请重新登录',
                    position: 'middle',
                    time: '1000',
                    });
                    this.showpsw = false;
                    this.$vux.loading.show();
                    setTimeout(() => {
                        this.$vux.loading.hide();
                        this.tc();
                    }, 500)
                    
                }
            },
            (error)=>{
            console.log(error);
            }
            );
      },
      S_name(){//修改名字
        const _this = this
        this.$vux.confirm.prompt('最多12个字', {
        title: '昵称',
        closeOnConfirm:false,
        onShow () {
          _this.$vux.confirm.setInputValue(_this.User_name)
        },
        onConfirm (msg) {
        if(msg.length>12){
        _this.$vux.toast.show({
        type: 'text',
        text: '最多12个字!',
        position: 'middle',
        time: '1000',
        })
        }
        else if(msg==''){
        _this.$vux.toast.show({
        type: 'text',
        text: '不能为空!',
        position: 'middle',
        time: '1000',
        })
        }
        else{
            _this.$vux.confirm.hide();
            _this.$http.post("http://localhost:3000/users/S_name",
            {
            User_id:_this.$store.state.wd.wdid,
            User_name:msg,
            },{emulateJSON: true})
            .then(
            (response)=>{
                if(response.data.msg.status=='ok'){//改名字
                    _this.$store.state.wd.wdname=response.data.msg.user;
                    _this.$vux.toast.show({
                    type: 'text',
                    text: '修改成功!',
                    position: 'middle',
                    time: '1000',
                    })
                    _this.reload()//重载
                }
            },
            (error)=>{
            console.log(error);
            }
            );
            
        }
        }
      })
      },
      S_sex(){//修改性别
        this.$http.post("http://localhost:3000/users/S_sex",
            {
            User_id:this.$store.state.wd.wdid,
            User_sex:this.User_sex,
            },{emulateJSON: true})
            .then(
            (response)=>{
                if(response.data.msg.status=='ok'){//改名字
                    this.$store.state.wd.wdsex=response.data.msg.user;
                    this.$vux.toast.show({
                    type: 'text',
                    text: '修改成功!',
                    position: 'middle',
                    time: '1000',
                    })
                    this.reload()//重载
                }
            },
            (error)=>{
            console.log(error);
            }
            );
      },

      S_intro(){//修改签名
        const _this = this
        this.$vux.confirm.prompt('最多24个字的个人签名', {
        title: '个人签名',
        closeOnConfirm:false,
        onShow () {
          _this.$vux.confirm.setInputValue(_this.User_intro)
        },
        onConfirm (msg) {
        if(msg.length>24){
        _this.$vux.toast.show({
        type: 'text',
        text: '最多24个字!',
        position: 'middle',
        time: '1000',
        })
        }
        else{
            _this.$vux.confirm.hide();
            if(msg==''){
                msg='楼主很懒！什么也没留下'
            };
            _this.$http.post("http://localhost:3000/users/S_intro",
            {
            User_id:_this.$store.state.wd.wdid,
            User_intro:msg,
            },{emulateJSON: true})
            .then(
            (response)=>{
                if(response.data.msg.status=='ok'){//改签名
                    _this.$store.state.wd.wdintro=response.data.msg.user;
                    _this.$vux.toast.show({
                    type: 'text',
                    text: '修改成功!',
                    position: 'middle',
                    time: '1000',
                    })
                    _this.reload()//重载
                }
            },
            (error)=>{
            console.log(error);
            }
            );
            
        }
        }
      })
      },

      seximg(){
      if(this.User_sex == '无'){
          this.User_seximg = 'static/img/sex.png'
      }
      else if(this.User_sex == '男') {
          this.User_seximg = 'static/img/male.png'
      }
      else if(this.User_sex == '女') {
          this.User_seximg = 'static/img/female.png'
      }
      },
      handleAvatarSuccess(res, file) {//图片回调
        this.$store.state.wd.wdtx='http://localhost:3000' +res.result;
        this.User_tx='http://localhost:3000' +res.result;
        console.log(res.result);
        
        this.$http.post("http://localhost:3000/users/S_tx",
            {
            User_id:this.$store.state.wd.wdid,
            User_tx:this.User_tx
            },{emulateJSON: true})
            .then(
            (response)=>{
                if(response.data.msg.status=='ok'){//改头像
                    this.$vux.toast.show({
                    type: 'text',
                    text: '修改成功!',
                    position: 'middle',
                    time: '1000',
                    })
                    this.reload()//重载
                }
            },
            (error)=>{
            console.log(error);
            }
            );
      },
  },
  mounted () {
      this.seximg();
  },
  created(){
      let user = sessionStorage.getItem('User_id');
      this.iflogin(user);
    },
}
</script>
<style scoped>
.S_txbox{
    margin: 20px;
    text-align: center;
}
.S_tx{
    border-radius: 50%;
}
.S_tips{
    color:rgb(158, 158, 158);
    font-size: 13px;
}
.S_b{
    width: 100;
    height: 10px;
    background-color: lightgray;
}
.S_msg{
    margin: 30px;
}
.S_t{
    width: 80px;
}
.S_tbox{
    display: flex;
    align-items:center;
    margin-bottom: 20px;
}
.S_m{
    color: rgb(143, 143, 143);
}
.S_btbox{
    margin-left: 50px;
    margin-right: 50px;
    margin-top: 80px;
    display: flex;
    justify-content: space-around;
}
.S_bt{
  color:white;
  background-color:#008CBA;
  border: none;
  border-radius: 30px;
  padding: 5px 15px;
  font-size: 16px;
  width: 85%;
  height: 40px;
}
.S_bt1{
  color:white;
  background-color:#008CBA;
  border: none;
  border-radius: 30px;
  padding: 5px 20px;
  font-size: 16px;
}
.Sex_bt{
    font-size: 20px;
    height: 50px;
    width: 40%;
    border: 1px;
    background-color:rgba(255, 255, 255, 0);
}
.S_psw{
    text-align: center;
}
</style>
